<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Adobe Labs - Spry Validation Textarea Overview</title>
<link href="../../css/articles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Working with the Validation Text Area widget</h2>
<h3>Validation Text Area widget overview and structure</h3>
<p>A Spry Validation Text Area widget is a text area that displays valid or 
  invalid states when the user enters a few sentences of text. If the text area is 
  a required field and the user fails to enter any text, the widget returns a 
  message stating that a value is required.</p>
<p>A version of this file is available on <a href="http://livedocs.adobe.com/en_US/Spry/SDG/index.html" target="_blank">Adobe LiveDocs</a>. Please check it for comments and updates. </p>
<p>The following example shows a Validation Text Area widget in various 
  states.</p>
<p><img alt="Text Area structure" src="TextareaDetails.gif" /></p>
<p>The Validation Text Area widget includes a number of states (for example, 
  valid, invalid, required value, and so on). You can alter the properties of 
  these states using the Property inspector, depending on the desired validation 
  results. A Validation Text Area widget can validate at various points&mdash;for 
  example, when the user clicks outside the widget, as the user types, or when the 
  user tries to submit the form.</p>
<dl>
  <dt>Initial state </dt>
  <dd> When the page loads in the browser, or when the user resets the 
    form.<br />
  </dd>
  <dt>Focus state </dt>
  <dd> When the user places the insertion point in the widget.<br />
  </dd>
  <dt>Valid state </dt>
  <dd> When the user enters information correctly, and the form can be 
    submitted.<br />
	</dd>
	<dt>Hint On state </dt>
  <dd> When the hint is displayed in the textarea.<br />
  </dd>
  <dt>Required state </dt>
  <dd> When the user fails to enter any text.<br />
  </dd>
  <dt>Minimum Number Of Characters state </dt>
  <dd> When the user enters fewer than the minimum number of characters required 
    in the text area.<br />
  </dd>
  <dt>Maximum Number Of Characters state </dt>
  <dd> When the user enters greater than the maximum number of characters allowed 
    in the text area.<br />
  </dd>
</dl>
<p>Whenever a Validation Text Area widget enters one of these states through 
  user interaction, the Spry framework logic applies a specific CSS class to the 
  HTML container for the widget at run time. For example, if a user tries to 
  submit a form, but did not enter text in the text area, Spry applies a class to 
  the widget that causes it to display the error message, &ldquo;A value is required.&rdquo; 
  The rules that control the style and display states of error messages exist in 
  the SpryValidationTextarea.css file that accompanies the widget.</p>
<p>The default HTML code for the Validation Text Area widget, usually inside a 
  form, is made up of a container span tag that 
  surrounds the textarea tag of the text area. The HTML 
  code for the Validation Text Area widget also includes script tags in the head of the document and after the 
  widget&rsquo;s HTML code.</p>
<p>The HTML code for the Validation Text Area widget also includes script tags in the head of the document and after the 
  widget&rsquo;s HTML code. The script tag in the head of the 
  document defines all of the JavaScript functions related to the Text Area 
  widget. The script tag after the widget code creates a 
  JavaScript object that makes the text area interactive.</p>
<p>Following is the HTML code for a Validation Text Area widget: </p>
<pre>&lt;head&gt; 
...  
&lt;!-- Link the Spry Validation Text Area JavaScript library --&gt; 
&lt;script src=&quot;SpryAssets/SpryValidationTextarea.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;!-- Link the CSS style sheet that styles the widget --&gt;
&lt;link href=&quot;SpryAssets/SpryValidationTextarea.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt; 
&lt;/head&gt;
&lt;body&gt;
	&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
		&lt;!-- Create the text area widget and assign a unique id--&gt;
		&lt;span id=&quot;sprytextarea1&quot;&gt;
			&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; cols=&quot;45&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
			&lt;!--Display an error message--&gt;
			&lt;span class=&quot;textareaRequiredMsg&quot;&gt;A value is required.&lt;/span&gt;
		&lt;/span&gt;
	&lt;/form&gt;
&lt;!-- Initialize the Validation Text Area widget object--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot;);
&lt;/script&gt;
&lt;/body&gt;</pre>
<p>In the code, the new JavaScript operator 
  initializes the Text Area widget object, and transforms the span content with the ID of sprytextarea1 from static HTML code into an interactive page 
  element.</p>
<p>The span tag for the error message in the widget 
  has a CSS class applied to it. This class (which is set to display:none; by default), controls the style and visibility 
  of the error message, and exists in the accompanying SpryValidationTextarea.css 
  file. When the widget enters different states as a result of user interaction, 
  Spry places different classes on the container for the widget, which in turn 
  affects the error-message class.</p>
<p>You can add other error messages to a Validation Text Area widget by creating 
  a span tag (or any other type of tag) to hold the text 
  of the error message. Then, by applying a CSS class to it, you can hide or show 
  the message, depending on the widget state.</p>
<p>You can change the default appearance of the Validation Text Area widget's 
  states by editing the corresponding CSS rule in the SpryValidationTextarea.css 
  file. For example, to change the background color for a state, edit the 
  corresponding rule or add a new rule (if it&rsquo;s not already present) in the style 
  sheet.</p>
<h4>Variation on tags used for Text Area widget 
  structure</h4>
<p>In the preceding example, span tags create the 
  structure for the widget:</p>
<pre>Container SPAN
	TEXTAREA tag
	Error message SPAN</pre>
<p>You can, however, use almost any container tag to create the widget:</p>
<pre>Container DIV
	TEXTAREA tag
	Error Message P</pre>
<p>Spry uses the tag ID (not the tag itself) to create the widget. Spry also 
  displays error messages using CSS code that is indifferent to the actual tag 
  used to contain the error message.</p>
<p>The ID passed into the widget constructor identifies a specific HTML element. 
  The constructor finds this element and looks inside the identified container for 
  a corresponding textarea tag. If the ID passed to the 
  constructor is the ID of the textarea tag (rather than 
  a container tag), the constructor attaches validation triggers directly to the textarea tag. If there is no container tag, however, 
  the widget cannot display error messages, and different validation states will 
  only alter the appearance of the textarea tag element 
  (for example, its background color).</p>
	<p><span class="notetitle">Note: </span>Multiple textarea tags do not work inside the same HTML widget 
	container. Each text field should be its own widget.</p>
<h3>CSS code for the Validation Text Area widget</h3>
<p>The SpryValidationTextarea.css file contains the rules that style the 
  Validation Text Area widget and its error messages. You can edit these rules to 
  style the look and feel of the widget and error messages. The names of the rules 
  in the CSS file correspond to the names of the classes specified in the widget&rsquo;s 
  HTML code.</p>
<p>The following is the CSS code for the SpryValidationTextarea.css file:</p>
<pre>/*Validation Textarea styling classes*/
.textareaRequiredMsg, .textareaMinCharsMsg, .textareaMaxCharsMsg, .textareaValidMsg {
	display:none;
}
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}
.textareaValidState textarea, textarea.textareaValidState {
	background-color:#B8F5B1;
}
textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color:#FF9F9F;
}
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color:#FFFFCC;
}
.textareaFlashState textarea, textarea.textareaFlashState{
	color:red !important;
}
textarea.textareaHintState, .textareaHintState textarea{
}</pre>
<p>The SpryValidationTextField.css file also contains extensive comments, 
  explaining the code and the purpose for certain rules. For further information, 
  see the comments in the file.</p>
<h3>Insert the Validation Text Area widget</h3>
<ol>
  <li><span>Locate the SpryValidationTextarea.js file and add 
    it to your web site. You can find the SpryValidationTextarea.js file in the 
    widgets/textareavalidation directory, located in the Spry directory that you 
    downloaded from Adobe Labs. </span>
    <p>For example, create a folder called <dfn>SpryAssets</dfn> in the 
      root folder of your web site, and upload the SpryValidationTextarea.js file to 
      it. The SpryValidationTextarea.js file contains all of the information 
      necessary for making the Text Area widget interactive.</p>
  </li>
  <li><span>Locate the SpryValidationTextarea.css file and add 
    it to your web site. You might choose to add it to the main directory, a 
    SpryAssets directory, or to a CSS directory if you have one.</span> </li>
  <li><span>Open the web page to add the Text Area widget to 
    and link the SpryValidationTextarea.js file to the page by inserting the 
    following script tag in the page&rsquo;s head tag:</span>
    <pre>&lt;script src=&quot;SpryAssets/SpryValidationTextarea.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; </pre>
    <p>Make sure that the file path to the SpryValidationTextarea.js file is 
      correct. This path varies depending on where you&rsquo;ve placed the file in your 
      web site.</p>
  </li>
  <li><span>Link the SpryValidationTextarea.css file to your 
    web page by inserting the following link tag in the 
    page&rsquo;s head tag:</span>
    <pre>&lt;link href=&quot;SpryAssets/SpryValidationTextarea.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt; </pre>
    <p>Make sure that the file path to the SpryValidationTextarea.css file is 
      correct. This path varies depending on where you&rsquo;ve placed the file in your 
      web site.</p>
  </li>
  <li><span>Add a text area to the page and give it a name and 
    a unique ID:</span>
    <pre>&lt;textarea name=&quot;mytextarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;</pre>
  </li>
  <li><span>Add a container around the text area by inserting span tags around the &lt;textarea&gt; tags, and assigning the widget a unique 
    ID, as follows:</span>
    <pre>&lt;span id=&quot;sprytextarea1&quot;&gt;
	&lt;textarea name=&quot;mytextarea&quot;&gt;&lt;/textarea&gt;
&lt;/span&gt; </pre>
  </li>
  <li><span>Initialize the text area object by inserting the 
    following script block after the HTML code for the widget:</span>
    <pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot;);
&lt;/script&gt; </pre>
    <p>The new JavaScript operator initializes the Text 
      Area widget object, and transforms the span tag 
      content with the ID of sprytextarea1 from static HTML code into an interactive 
      text field object. The Spry.Widget.ValidationTextarea method is a constructor 
      in the Spry framework that creates text area objects. The information 
      necessary to initialize the object is contained in the JavaScript library, 
      SpryValidationTextarea.js, that you linked to at the beginning of this 
      procedure.</p>
    <p>Make sure that the ID of the text area&rsquo;s container span tag matches the ID parameter you specified in the 
      Spry.Widgets.ValidationTextarea method. Make sure that the JavaScript call 
      comes after the HTML code for the widget.</p>
  </li>
  <li><span>Save the page.</span>
    <p>The complete code looks as follows:</p>
    <pre>&lt;head&gt; 
... 
&lt;script src=&quot;SpryAssets/SpryValidationTextarea.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;link href=&quot;SpryAssets/SpryValidationTextarea.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt; 
&lt;/head&gt;
&lt;body&gt;
	&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
		&lt;span id=&quot;sprytextarea1&quot;&gt;
			&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; cols=&quot;45&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
		&lt;/span&gt;
	&lt;/form&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot;);
&lt;/script&gt;
&lt;/body&gt;</pre>
  </li>
</ol>
<h3>Display error messages</h3>
<p><span>&nbsp;Create a span tag (or 
        any other type of tag) to display the error message, and assign the appropriate 
				class to it, as follows:</span></p>
<pre>&lt;span id=&quot;sprytextarea1&quot;&gt;
	&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; cols=&quot;45&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
	&lt;span class=&quot;textareaRequiredMsg&quot;&gt;Please enter a description&lt;/span&gt;
&lt;/span&gt;</pre>
<p>The .textareaRequiredMsg rule is located in the 
  SpryValidationTextarea.css file, and is set to display:none by default. When the widget enters a different 
  state through user interaction, Spry applies the appropriate class &mdash;the state 
  class&mdash;to the container of the widget. This action affects the error message 
  class, and by extension, the appearance of the error message.</p>
<p>For example, the following shows a portion of the CSS from the 
  SpryValidationTextarea.css file:</p>
<pre>.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	display:none;
}
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg {
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}</pre>
<p>By default, there is no state class applied to the widget container, so that 
  when the page loads in a browser, the error message text in the preceding HTML 
  code example only has the .textareaRequiredMsg class 
  applied to it. (The property and value pair for this rule is display:none, so the message remains hidden.) If the user 
  fails to enter text in a required text area, however, Spry applies the 
  appropriate class to the widget container, as follows:</p>
<pre>&lt;span id=&quot;sprytextarea1&quot; class=&quot;textareaRequiredState&quot;&gt;
	&lt;input type=&quot;text&quot; name=&quot;mytextarea&quot; id=&quot;mytextarea&quot; /&gt;
	&lt;span class=&quot;textareaRequiredMsg&quot;&gt;Please enter a description&lt;/span&gt;
&lt;/span&gt;</pre>
<p>In the CSS in the preceding code, you can see that the state rule with the 
  contextual selector .textareaRequiredState . 
  textareaRequiredMsg overrides the default error-message rule responsible 
  for hiding the error message text. Thus, when Spry applies the state class to 
  the widget container, the state rule determines the appearance of the widget, 
  and displays the error message inline in red with a 1-pixel solid border.</p>
<p>Following is a list of default error-message classes and their descriptions. 
  You can change these classes and rename them to anything you want. If you do so, 
  don&rsquo;t forget to change them in the contextual selector also.</p>
<table>
  <thead align="left">
    <tr>
      <th> <p>Error message class</p></th>
      <th> <p>Description</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>.textareaRequiredMsg</p></td>
      <td><p>Causes error message to display when the widget enters the required 
          state</p></td>
    </tr>
    <tr>
      <td><p>.textareaMinCharsMsg</p></td>
      <td><p>Causes error message to display when the widget enters the minimum 
          number of characters state</p></td>
    </tr>
    <tr>
      <td><p>.textareaMaxCharsMsg</p></td>
      <td><p>Causes error message to display when the widget enters the maximum 
          number of characters state</p></td>
    </tr>
    <tr>
      <td><p>.textareaValidMsg</p></td>
      <td><p>Causes error message to display when the widget enters the valid 
          state</p></td>
    </tr>
  </tbody>
</table>
<p><span class="notetitle">Note: </span>You cannot rename 
          state-related class names because they are hard-coded as part of the Spry 
					framework.</p>
<h3>Specify when validation occurs</h3>
<p>By default, the Validation Text Area widget validates when the user clicks 
  the submit button. You can, however, set two other options: blur or change. The validateOn:[&quot;blur&quot;] parameter causes the widget to 
  validate whenever the user clicks outside the text area. The validateOn:[&quot;change&quot;] parameter causes the widget to 
  validate as the user changes text inside the text area.</p>
	<p><span>&nbsp;To specify when 
        validation occurs, add a validateOn parameter to the 
				constructor as follows:</span></p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot;, {validateOn:[&quot;blur&quot;]});
&lt;/script&gt;</pre>
<p>As a convenience, you can discard the brackets if your validateOn parameter contains a single value (for example, validateOn: &quot;blur&quot;). If the parameter contains both 
  values, however (validateOn:[&quot;blur&quot;, &quot;change&quot;]), 
  include brackets in the syntax.</p>
<h3>Specify a minimum and maximum number of characters</h3>
<p><span>&nbsp;To specify a minimum or 
        maximum number of characters, add the minChars property or maxChars property (or both) and a value to 
				the constructor, as follows:</span></p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var textareawidget1 = new Spry.Widget.ValidationTextarea(&quot;textareawidget1&quot;,{minChars:<em>value</em>, maxChars:<em>value</em>});
&lt;/script&gt;</pre>
<h3>Add a character counter</h3>
<p>You can add a character counter that lets your users know how many characters 
  they have typed, or how many characters are remaining when entering text in the 
  text area.</p>
<ol>
  <li><span>Add a span tag after the textarea tag for the widget, and assign a unique ID 
    to the tag, as follows:</span>
    <pre>&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
	&lt;span id=&quot;sprytextarea1&quot;&gt;
		&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; cols=&quot;45&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
		&lt;span id=&quot;my_counter_span&quot;&gt;&lt;/span&gt;
		&lt;span class=&quot;textareaRequiredMsg&quot;&gt;Maximum number of characters exceeded&lt;/span&gt;
	&lt;/span&gt;
&lt;/form&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot; {maxChars:100});
&lt;/script&gt;</pre>
    <p>Leave the new tag empty. Spry provides the content of the tag later as the 
      user types in text.</p>
<p><span class="notetitle">Note: </span>The counter tag must appear 
within the HTML container tag for the widget.</p></li>
  <li><span>Add the counterType option and a value to the widget constructor, as follows:</span>
    <pre>&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
	&lt;span id=&quot;sprytextarea1&quot;&gt;
		&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; cols=&quot;45&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
		&lt;span id=&quot;my_counter_span&quot;&gt;&lt;/span&gt;
		&lt;span class=&quot;textareaRequiredMsg&quot;&gt;Maximum number of characters exceeded&lt;/span&gt;
	&lt;/span&gt;
&lt;/form&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot; {maxChars:100, counterType:&quot;chars_remaining&quot;});
&lt;/script&gt;</pre>
    <p>The counterType option defines the type of 
      counter to use and can take two values: &quot;chars_count&quot;, or &quot;chars_remaining&quot;. The &quot;chars_count&quot; value results in a counter that counts the 
      number of characters typed in the text area. The &quot;chars_remaining&quot; value 
      results in a counter that displays the number of characters remaining before 
      the maximum number of characters is reached. The second option must be used in 
      conjunction with the maxChars option, as in the 
      preceding example. </p>
  </li>
  <li><span>Add the counterId option 
    to the widget constructor, and set its value equal to the unique idea you 
    assigned to the counter span tag, as follows:</span>
    <pre>&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
	&lt;span id=&quot;sprytextarea1&quot;&gt;
		&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; cols=&quot;45&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
		&lt;span id=&quot;my_counter_span&quot;&gt;&lt;/span&gt;
		&lt;span class=&quot;textareaRequiredMsg&quot;&gt;Maximum number of characters exceeded&lt;/span&gt;
	&lt;/span&gt;
&lt;/form&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot; {maxChars:100, counterType:&quot;chars_remaining&quot;, counterId:&quot;my_counter_span&quot;});
&lt;/script&gt;</pre>
  </li>
</ol>
<h3>Change required status of a text area</h3>
<p>By default, Validation Text Area widgets require user input when published on 
  a web page. You can, however, make the completion of text areas optional for the 
  user.</p>
	<p><span>&nbsp;To change the required 
        status of a text area, add the isRequired property to 
				the constructor and set its value to false, as follows:</span></p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var textareawidget1 = new Spry.Widget.ValidationTextarea(&quot;textareawidget1&quot;, {isRequired:false});
&lt;/script&gt;</pre>
<h3>Create a hint for a text area</h3>
<p>The hint option lets you display a hint that lets 
  your user know what kind of text they should enter (for example, &ldquo;Enter your 
  address here&rdquo;). The hint appears in the text area when the user loads the page 
  in a browser and no predefined value exists.</p>
	<p>You can change the look of the hint text to be different than any other textarea text 
	value through the CSS class &quot;textareaHintState&quot;.</p>
	<p><span>&nbsp;To create a hint for a 
        text area, add the hint property to the constructor 
				and the text of your hint as the value, as follows:</span></p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var textareawidget1 = new Spry.Widget.ValidationTextarea(&quot;textareawidget1&quot;, {hint:&quot;Enter your address here&quot;});
&lt;/script&gt;</pre>
<h3>Block extra characters</h3>
<p>You can prevent your users from entering more than the maximum number of 
  allowed characters in a Validation Text Area widget. For example, if you set the 
  useCharacterMasking option so that a widget can accept no more than 20 
  characters, the user cannot type more than 20 characters in the text area.</p>
<p>Use this option in conjunction with the maxChars option.</p>
<p><span>&nbsp;To block extra 
        characters, add the useCharacterMasking property to 
        the constructor and set its value to true, as 
				follows:</span></p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var textareawidget1 = new Spry.Widget.ValidationTextarea(&quot;textareawidget1&quot;, maxChars:20, {useCharacterMasking:true});
&lt;/script&gt;</pre>
<h3>Customize the Validation Text Area widget</h3>
<p>The SpryValidationTextarea.css file provides the default styling for the 
  Validation Text Area widget. You can, however, customize the widget by changing 
  the appropriate CSS rule. The CSS rules in the SpryValidationTextarea.css file 
  use the same class names as the related elements in the widget&rsquo;s HTML code, so 
  it&rsquo;s easy for you to know which CSS rules correspond to the widget and its error 
  states.</p>
<p>The SpryValidationTextarea.css file should already be included in your 
  website before you start customizing. </p>
<h4>Style a Validation Text Area widget (general 
  instructions)</h4>
<ol>
  <li><span>Open the SpryValidationTextarea.css file.</span> </li>
  <li><span>Locate the CSS rule for the part of the widget to change. For 
    example, to change the background color of the Text Area widget&rsquo;s required 
    state, edit the textareaRequiredState rule in the 
    SpryValidationTextarea.css file.</span> </li>
  <li><span>Make your changes to the CSS rule and save the file.</span> </li>
</ol>
<p>The SpryValidationTextarea.css file contains extensive comments, explaining 
  the code and the purpose for certain rules. For further information, see the 
  comments in the file.</p>
<h4>Style Validation Text Area widget error message text</h4>
<p>By default, error messages for the Validation Text Area widget appear in red 
  with a 1-pixel solid border surrounding the text.</p>
	<p><span>&nbsp;To change the text 
          styling of Validation Text Area widget error messages, use the following table 
          to locate the appropriate CSS rule, and then change the default properties, or 
					add your own text styling properties and values.</span></p>
<table>
  <thead align="left">
    <tr>
      <th> <p>Text to change</p></th>
      <th> <p>Relevant CSS rule</p></th>
      <th> <p>Relevant properties to change</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>Error message text</p></td>
      <td><p>.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState 
          .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg</p></td>
      <td><p>color: #CC3333; border: 1px solid 
          #CC3333;</p></td>
    </tr>
  </tbody>
</table>
<h4>Change Validation Text Area widget background colors</h4>
<p><span>&nbsp;To change the background 
          colors of the Validation Text Area widget in various states, use the following 
          table to locate the appropriate CSS rule, and then change the default background 
					color values.</span></p>
<table>
  <thead align="left">
    <tr>
      <th> <p>Background color to change</p></th>
      <th> <p>Relevant CSS rule</p></th>
      <th> <p>Relevant property to change</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>Background color of widget in valid state</p></td>
      <td><p>.textareaValidState textarea, textarea.textareaValidState</p></td>
      <td><p>background-color: #B8F5B1;</p></td>
    </tr>
    <tr>
      <td><p>Background color of widget in invalid state</p></td>
      <td><p>textarea.textareaRequiredState, .textareaRequiredState textarea, 
          textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
          textarea.textareaMaxCharsState, .textareaMaxCharsState textarea</p></td>
      <td><p>background-color: #FF9F9F;</p></td>
    </tr>
    <tr>
      <td><p>Background color of widget in focus</p></td>
      <td><p>.textareaFocusState textarea, textarea.textareaFocusState</p></td>
      <td><p>background-color: 
          #FFFFCC;</p></td>
    </tr>
		 <tr>
      <td><p>Background color of widget with hint on</p></td>
      <td><p>.textareaHintState textarea, textarea.textareaHintState</p></td>
      <td><p>background-color: 
          #FFFFCC;</p></td>
    </tr>
  </tbody>
</table>
<h4>Customize state-related class names</h4>
<p>While you can replace error message-related class names with class names of 
  your own by changing the rules in the CSS and the class names in the HTML code, 
  you cannot change or replace state-related class names, because the behaviors 
  are hard-coded as part of the Spry framework. You can, however, override the 
  default state-related class name with your own class name by specifying a new 
  value in the third parameter of the widget constructor.</p>
	<p><span>&nbsp;To change widget 
          state-related class names, add one of the overriding options to the third 
          parameter of the widget constructor, and specify your custom class name, as 
					follows:</span></p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
	var sprytextarea1 = new Spry.Widget.ValidationTextarea(&quot;sprytextarea1&quot;, {requiredClass:&quot;required&quot;});
&lt;/script&gt;</pre>
<p>The following table provides a list of options you can use to override 
  built-in state-related class names.</p>
<table>
  <thead align="left">
    <tr>
      <th> <p>Option</p></th>
      <th> <p>Description</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>requiredClass</p></td>
      <td><p>Overrides the &quot;textareaRequiredState&quot; built-in value </p></td>
    </tr>
    <tr>
      <td><p>validClass</p></td>
      <td><p>Overrides the &quot;textareaValidState&quot; built-in value </p></td>
    </tr>
    <tr>
      <td><p>focusClass</p></td>
      <td><p>Overrides the &quot;textareaFocusState&quot; built-in value </p></td>
    </tr>
    <tr>
      <td><p>invalidCharsMinClass</p></td>
      <td><p>Overrides the &quot;textareaMinCharsState&quot; built-in value </p></td>
    </tr>
    <tr>
      <td><p>invalidCharsMaxClass</p></td>
      <td><p>Overrides the &quot;textareaMaxCharsState&quot; built-in value </p></td>
    </tr>
    <tr>
      <td><p>textareaFlashClass</p></td>
      <td><p>Overrides the &quot;textareaFlashState&quot; built-in value </p></td>
    </tr>
    <tr>
      <td><p>hintClass</p></td>
      <td><p>Overrides the &quot;textareaHintState&quot; built-in value </p></td>
    </tr>
  </tbody>
</table>
<hr />
<p>Copyright &copy; 2006. Adobe Systems Incorporated. All rights reserved.</p>
</body>
</html>
